<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
	<el-container style="padding: 0 30px;">
		<p class="comm-title-withang"><i class="el-icon-caret-right"></i>建筑列表</p>
		<el-row style="margin-top: 20px;">
			<el-table :data="alrmtableData" v-loading.body="alamLoading" style="width: 100%">
				<el-table-column label="建筑">
					<template slot-scope="scope">
						<span>{{scope.row.bName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="地址">
					<template slot-scope="scope">
						<span>{{scope.row.bAddress}}</span>
					</template>
				</el-table-column>
				<el-table-column label="安全责任人">
					<template slot-scope="scope">
						<span>{{scope.row.safeDutyName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="安全责任电话">
					<template slot-scope="scope">
						<span>{{scope.row.safeDutyPhone}}</span>
					</template>
				</el-table-column>
				<el-table-column label="报警设备(个)" width="100">
					<template slot-scope="scope">
						<span>{{scope.row.callCount}}</span>
					</template>
				</el-table-column>
				<el-table-column label="故障设备(个)" width="100">
					<template slot-scope="scope">
						<span>{{scope.row.faultCount}}</span>
					</template>
				</el-table-column>
				<el-table-column label="正常设备(个)" width="100">
					<template slot-scope="scope">
						<span>{{scope.row.normalCount}}</span>
					</template>
				</el-table-column>
				<el-table-column label="平面图" width="100" v-if="planSetup==1">
					<template slot-scope="scope">
						<el-button type="text" @click="viewimg(scope.row.id)">查看平面图</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-footer>
			<div class="pagination-container">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryList.page" :page-sizes="[10,15,30,40]" :page-size="queryList.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-footer>
	</el-container>
</template>
<script>
import { getAllListData } from "@/api/datahandler/deviceAbnormal/index";
export default {
  props: {
    loadData: {
      required: true,
      default: false
    },
    channelId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      alrmtableData: [],
      alamLoading: false,
      total: 0,
      queryList: {
        page: 1,
        limit: 15
      },
      planSetup:"0"
    };
  },
  methods: {
    getAllData() {
		this.$store.dispatch("getImgAuth").then(()=>{
	      this.planSetup=this.$store.getters.planSetup;
	    });
      this.alamLoading = true;
      getAllListData({ ...{ channelId: this.channelId }, ...this.queryList })
        .then(res => {
          this.alrmtableData = res.data.rows;
          this.total = res.data.total;
          this.alamLoading = false;
        })
        .catch(() => {
          this.alamLoading = false;
        });
    },
    handleSizeChange(val) {
      this.queryList.limit = val;
      this.getAllData();
    },
    handleCurrentChange(val) {
      this.queryList.page = val;
      this.getAllData();
    },
    viewimg(id) {
      this.$emit("showSensor", id);
    }
  },
  watch: {
    loadData(val) {
      let self = this;
      if (val) {
        this.$nextTick(() => {
          self.getAllData();
        });
      } else {
        this.alamLoading = false;
        this.$nextTick(() => {
          self.alamLoading = false;
        });
      }
    }
  }
};
</script>
<style>
.el-table th {
  background: #f5f7fa;
}
</style>
